<template>
  <div>
    <div class="top-div">
      <el-row>
        <el-col :span="1" :push="20">
          <el-button  v-if="form.id==''&&$store.state.authList.indexOf('index:flower:save')!=-1" type="primary" @click="save" icon="el-icon-folder-add">保 存</el-button>
          <el-button v-else-if="$store.state.authList.indexOf('index:flower:update')!=-1" type="primary" @click="save" icon="el-icon-folder-add">更 新</el-button>
        </el-col>
        <el-col :span="1" :push="21">
          <el-button @click="Return" icon="el-icon-arrow-left">返 回</el-button>
        </el-col>
      </el-row>
    </div>
    <el-scrollbar style="height:calc(100vh - 220px);">
      <div style="position: relative; margin-top: 30px;background-color: white;padding: 30px">
<!--         手机-->
        <div style="position: fixed; z-index: 200; top: 180px; right: 100px;">
          <flower-iphone :form="form"></flower-iphone>
        </div>

        <!-- 左侧表单 -->
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="图片:" prop="imgUrl">
            <el-upload
              :file-list="fileList"
              :action="$store.state.uploadAction"
              list-type="picture-card"
              :limit="3"
              accept=".jpg, .png"
              :on-exceed="overLimt"
              :on-preview="handlePictureCardPreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,不超过三张</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item label="标题:" prop="title">
            <el-input v-model.trim="form.title"></el-input>
          </el-form-item>
          <el-form-item label="原价:" prop="oldPrice">
            <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="form.oldPrice"></el-input>
          </el-form-item>
          <el-form-item oninput="value=value.replace(/[^\d]/g,'')" label="现价:" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="库存:" prop="number">
            <el-input v-model="form.number"></el-input>
          </el-form-item>
          <el-form-item label="类别:" prop="section">
            <el-cascader
              :props="props"
              v-model="form.section"
              :options="options"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="描述模板:">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in descpOptions"
                :key="item.id"
                :label="item.title"
                :value="item.context"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <Editor @setDescription="setDescription" ref="editors"></Editor>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import sectionApi from "../../api/sectionApi";
import flowerApi from "../../api/flowerApi";
import Editor from "../editor/Editor";
import descriptionApi from "../../api/descriptionApi";
import FlowerIphone from "../phone/flowerIphone";

export default {
  name: "Form",
  components: { FlowerIphone, Editor },
  data() {
    return {
      descpOptions: [],
      options: [],
      value: "",
      dialogImageUrl: "",
      props: {
        multiple: true,
        emitPath: false
      },
      fileList: [],
      dialogVisible: false,
      form: {
        id: "",
        title: "",
        description: "",
        section: "",
        price: "",
        oldPrice: "",
        imgUrl: "",
        number: "",
        imgUrlList:""
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        description: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur"
          }
        ],
        price: [
          {
            required: true,
            message: "请输入现价",
            trigger: "blur"
          }
        ],
        section: [
          {
            required: true,
            message: "请至少选择一个类别",
            trigger: "change"
          }
        ],
        imgUrl: [
          {
            required: true,
            message: "请输入轮播图",
            trigger: "blur"
          }
        ],
        number: [
          {
            required: true,
            message: "请输入库存",
            trigger: "blur"
          }
        ],
        oldPrice: [
          {
            required: true,
            message: "请输入原价",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    value: function(val, old) {
      this.$refs.editors.context = val;
    }
  },
  mounted() {
    sectionApi.list().then(res => {
      this.options = res.data[0].children;
    });
    let id = this.$route.query.id;
    if (id != null && id != "") {
      this.get(id);
    }
    this.listDescription();
  },
  methods: {
    setDescription(val){
      this.form.description=val
    },
    listDescription() {
      descriptionApi.list().then(res => {
        this.descpOptions = res.data;
      });
    },
    get(id) {
      flowerApi.get(id).then(res => {
        this.form = res.data;
        if (this.form.imgUrl != "") {
          let imgs = this.form.imgUrl.split(",");
          imgs.forEach(item => {
            this.fileList.push({
              url: item
            });
          });
          this.form.section=this.form.section.split(",")
          this.$refs.editors.context = this.form.description;
        }
      });
    },
    save() {
      this.form.section = this.form.section.toString();
      this.form.description = this.$refs.editors.context;
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id != "") {
            flowerApi.update(this.form).then(res => {
              if (res.flag == true) {
                this.$router.go(-1);
              }
            });
          } else {
            flowerApi.save(this.form).then(res => {
              if (res.flag == true) {
                this.$message.info("可继续添加");
                this.fileList = [];
                this.$refs.form.resetFields();
              }
            });
          }
        }
      });
    },
    overLimt() {
      this.$message.error("最多上传三张图片");
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    handleRemove(file, fileList) {
      this.formtFile(fileList);
    },
    handleSuccess(response, file, fileList) {
      this.formtFile(fileList);
    },
    formtFile(fileList) {
      fileList.forEach(item => {
        if (item.hasOwnProperty("response")) {
          item.url = item.response.data;
        }
      });
      this.fileList = fileList;
      let imgUrlList = [];
      this.fileList.forEach(item => {
        imgUrlList.push(item.url);
      });
      this.form.imgUrlList=imgUrlList
      this.form.imgUrl = imgUrlList.join(",");
    },
    Return() {
      this.$router.go(-1);
    }
  }
};
</script>

<style>
.el-select-dropdown__item {
  height: 47px !important;
}
</style>